<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        收集表单数据：
        若: <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
        若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
        若：<input type="checkbox"/>
            1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
            2.配置input的value属性：
            （1)v-model的初始值是非数组，那么收集的就是checked （勾选 or 未勾选，是布尔值）
            （2）v-model的初始值是数组，那么收集的的就是value组成的数组备注：
            
        v-model的三个修饰符：lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤
    -->
    <!-- 准备一个容器 -->
    <div id="root">
        <ul>
            <form @submit.prevent="submit" style="background-color: orange; width: auto; height: auto;">
                <h2 style="text-align: center;">员工信息</h2>
                账户：<input type="text" v-model="customerInfo.account"><br>
                密码：<input type="password" v-model="customerInfo.password"><br>
                年龄：<input type="number" v-model.number="customerInfo.age"><br>
                性别：
                男<input type="radio" v-model="customerInfo.sex" name="sex" value="boy">女<input type="radio" v-model="customerInfo.sex" name="sex" value="girl"><br>
                爱好：<input type="checkbox" v-model="customerInfo.hobby" value="chouyan">抽烟
                <input type="checkbox" v-model="customerInfo.hobby" value="hejiu">喝酒
                <input type="checkbox" v-model="customerInfo.hobby" value="tangtou">烫头
                <br>
                所属部门：<select name="dept" v-model="customerInfo.dept">
                    <option value="shichangbu">市场部</option>
                    <option value="jishu">技术部</option>
                    <option value="caiwu">财务部</option>
                    <option value="qita">其它部门</option>
                </select><br>
                其他信息：<textarea name="otherInfo" v-model.lazy="customerInfo.otherInfo"></textarea><br>
                <input type="checkbox" v-model="customerInfo.agree">我同意《梅清公司员工入职协议》<br>
                <br>
                <button style="text-align: center; margin-block-end: auto;">提交</button>
            </form>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el:'#root',
            data(){
                return{
                    customerInfo:{
                        account:'',
                        password:'',
                        age:'',
                        sex:'',
                        hobby:[],
                        dept:'jishu',
                        otherInfo:'',
                        agree:'',
                    }
                }
            },
            methods: {
                submit(){
                    alert(JSON.stringify(this.customerInfo))
                }
            },
        })
    </script>
</body>

</html>